<template>
  <div>
    <h1>购物车实例</h1>
    <p class="mar-p">账号： {{ email }}</p>
    <hr>
    <h2>产品</h2>
    <product-list></product-list>
    <hr>
    <shopping-cart></shopping-cart>
  </div>
</template>

<script>
  import { mapState } from 'vuex';
  import ProductList from './ProductList.vue';
  import ShoppingCart from './ShoppingCart.vue';
  export default {
    computed: mapState({
        email: state => state.userInfo.email    
    }),
    components: {ProductList, ShoppingCart}
  }
</script>

<style lang="stylus">
  .mar-p {
    margin-bottom: 20px;
  }
</style>